
// 在webpack中尝试使用Vue:

// 在webpack中，使用import Vue from 'vue' 导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式；
// import Vue from 'Vue';
import Vue from 'vue'
// 包的查找规则：
// 1.找项目根目录中有没有node_modules的文件夹
// 2.在node_modules中根据包名，找对应的vue文件夹
// 3.在vue文件夹中，找一个叫做package.json的包配置文件
// 4.在package.json文件中，查找一个main属性【main属性指定了这个包在被加载的时候的入口文件】


// 1.导入login组件
// import login from './login.vue';
// 默认webpack无法打包 .vue 文件，需要安装相关的loader：
// npm i vue-loader vue-template-compiler -D
// 在配置文件中，新增loader配置项 {test: /\.vue$/, use: 'vue-loader'}

/*var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hhh'
    },
    render: function (createElements) { // 在webpack中，如果想要通过vue文件，把一个组件放到页面中去展示，vm实例中的render函数可以实现。
        return createElements(login);
    }
});*/


// 总结梳理： 在webpack中如何使用vue：
// 1.安装vue包： npm i vue -s
// 2.由于在webpack中，推荐使用 .vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader: npm i vue-loader vue-template-complier -D
// 3.在main.js中，导入vue模块：import Vue from 'vue';
// 4.webpack.config.js中，const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin.js'); //  Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin
// 并在plugins中实例化 new VueLoaderPlugin();
// 5.定义一个 .vue结尾的组件文件， 其中，组件有三部分组成： template、 script、 style。
// 6.使用import 导入这个组件,eg: import login from './login.vue'。
// 7.创建vm的实例 var vm = new Vue({el: '#app', render: c => c(login)})
// 7.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域

/*
import ml, {title, content} from './test.js';
console.log(ml);
console.log(title);
console.log(content);*/



/**
 * webpack-vue-router*/
// 1.导入vue-router包
import VueRouter from 'vue-router'

// 导入Mint-UI
import MintUI from 'mint-ui'   // 把所有的组件都导入了
// 这里可以省略 node_modules 这一层目录
import 'mint-ui/lib/style.css'

// 导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
import './lib/mui/css/mui.css'


// 2.手动安装VueRouter
Vue.use(VueRouter);
// 将MintUI安装到Vue中
Vue.use(MintUI);   // 把所有的组件，注册为全局的组件


// 按需导入Mint-UI组件
import {Button} from 'mint-ui'
// 使用Vue.component 注册按钮组件
Vue.component(Button.name, Button);
// Button.name 可是自定义其他名称。






// 导入组件
import app from './App.vue'
// 导入自定义路由模块
import router from './router.js'


var vm = new Vue({
    el: '#app',
    render: c => c(app), //render会把el指定的容器中，所有的内容都清空覆盖，所以，不要把路由的router-view 和 router-link 写到 el 控制的容器中。
    router // 4.将路由对象挂在到vm实例上
});


// 注意： App这个组件是通过vm实例的render函数渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el：'#app'所指定的元素中；
// Account 和 GoodsList组件，是通过路由匹配监听到的，所以，这两个组件只能展示到术语路由的 router-view 中去。